<template>
  <!-- 我的奖扣分页面 -->
  <div class="box">
    <van-sticky :offset-top="0">
      <div class="awardDeduction_top">
        <van-row>
          <van-col
            span="12"
            :style="{fontSize:'16px'}"
            @click="showTime"
          >{{data_time}}
            <van-icon name="arrow-down" />
          </van-col>
          <van-col
            span="12"
            @click="showPopup"
            :style="{fontSize:'16px'}"
          >全部
            <van-icon name="arrow-down" />
          </van-col>
          <!-- 时间筛择 -->
          <van-popup
            v-model="time"
            :safe-area-inset-bottom="true"
            :style="{width:'86%',fontSize:'14px',borderRadius:'10px'}"
            :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
          >
            <van-datetime-picker
              v-model="currentDate"
              type="year-month"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="getTime"
              @cancel="showEnd"
            />
          </van-popup>
          <!-- 类型选择 -->
          <van-popup
            v-model="show"
            round
            :safe-area-inset-bottom="true"
            :style="{ width:'54%',fontSize:'14px'}"
            :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
          >
            <van-radio-group v-model="radio">
              <van-cell-group :style="{textAlign:'left'}">
                <van-cell
                  :title="it.name"
                  clickable
                  @click="showStatus(it.index)"
                  v-for="(it,y) in status"
                  :key="y"
                >
                  <van-radio
                    slot="icon"
                    :name="it.index"
                    :style="{marginRight:'4vw'}"
                  />
                </van-cell>
              </van-cell-group>
            </van-radio-group>
          </van-popup>
        </van-row>
      </div>
    </van-sticky>
    <div style="height:15px;background: #f8f8fa"></div>
    <van-list
      v-if="list.length!=0"
      v-model="loading"
      :finished="finished"
      :offset="10"
      :immediate-check="false"
      finished-text="我是有底线的"
      @load="onLoadlist"
    >
      <div
        class="awardDeduction_content clearfix"
        v-for="(item,i) in list"
        :key="i"
      >
        <div
          v-for="(li,j) in item.approvalevent.approvalderive"
          :key="j"
        >
          <div class="left">
            <span class="my_title_text">
              <van-icon name="flower-o" />{{item.approvalevent.event_name}}</span>
            <ul>
              <li><span>初审人: </span><span>{{item.first_name}}</span></li>
              <li><span>终审人: </span><span>{{item.end_name}}</span></li>
              <li><span>奖扣人: </span><span>{{li.user_name}}</span></li>
              <li>{{item.create_date}}</li>
            </ul>
          </div>
          <div
            class="right"
            v-for="(item2,i) in status"
            :key="'info'+i"
          >
            <p v-if="item.status==item2.index">
              <span v-if="li.code_b.indexOf('-')!=-1 ||li.code_b==0">{{li.code_b}}</span><span v-else>+{{li.code_b}}</span><br />
              <span :class="item2.index==2?'color':'color1'">{{item2.name}}</span>
            </p>
          </div>
        </div>

      </div>
    </van-list>
    <p
      style="color:#b0aeae;font-size:15px"
      v-show="data"
    >本月暂无{{D_name}}申请记录</p>
  </div>
</template>

<script type="text/javascript">
import {
  RadioGroup,
  Radio,
  Cell,
  Popup,
  CellGroup,
  Icon,
  Row,
  Col,
  DatetimePicker
} from "vant";
export default {
  data() {
    return {
      radio: 5,
      show: false,
      time: false,
      data: false,
      loading: false, // 上拉加载
      finished: false, // 上拉加载完毕
      offset: 100, // 滚动条与底部距离小于 offset 时触发load事件
      pageSize: 10, // 每页条数
      pageIndex: 1, // 页码
      page: 0,
      list: [],
      status: [
        {
          index: 5,
          name: "全部"
        },
        {
          index: 0,
          name: "初审中"
        },
        {
          index: 1,
          name: "终审中"
        },
        {
          index: 2,
          name: "通过"
        },
        {
          index: 3,
          name: "驳回"
        },
        {
          index: 4,
          name: "撤回"
        }
      ],
      minDate: new Date(2018, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      data_time: "",
      people_userId: 0,
      D_name: ""
    };
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [DatetimePicker.name]: DatetimePicker
  },
  created() {
    this.D_name = localStorage.getItem("d_name");
    this.dataTime();
    dd.biz.navigation.setTitle({
      title: "我的奖扣分" //控制标题文本，空字符串表示显示默认文本
    });
  },
  methods: {
    showEnd() {
      this.time = false;
      this.currentDate = new Date();
      this.dataTime();
    },
    dataTime() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let month;
      if (mm < 10) {
        month = "0" + mm;
      } else {
        month = mm;
      }
      let year = yy + "-" + month;
      this.data_time = year;
      this.getThisMonth(5, 0, year);
    },
    // 时间筛选
    getTime(time) {
      const d = new Date(time);
      let yy = d.getFullYear();
      let mm = this.p(d.getMonth() + 1);
      const resDate = d.getFullYear() + "-" + this.p(d.getMonth() + 1);
      this.data_time = resDate;
      this.time = false;
      this.getThisMonth(5, 0, resDate);
    },
    p(s) {
      return s < 10 ? "0" + s : s;
    },
    showTime() {
      this.time = true;
    },
    showStatus(i) {
      if (i == 5) {
        this.getThisMonth(5, 0);
      } else {
        this.page = 0;
        this.pageIndex = 1;
        this.getThisMonth(i, 0, this.data_time);
      }

      this.show = false;
    },
    onLoadlist() {
      const p = this.page;
      this.pageIndex++;
      this.getThisMonth(5, p, this.data_time);
    },
    async getThisMonth(status, cursor, year) {
         let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      let userId = localStorage.getItem("userId");
      await this.$http
        .get(
          `yuepoints/thisMonth?corpId=${corpId}&userId=${userId}&type=1&status=${status}&date=${year}&cursor=${cursor}`
        )
        .then(res => {
          const {
            data: { event },
            data,
            cursor,
            errcode
          } = res.data;
          if (errcode == "0000") {
            this.data = false;
            if (event.length === 0 || event === null) {
              this.finished = true;
              // this.$toast("数据为空！");
              return;
            }

            if (event.length < this.pageSize) {
              this.finished = true;
            }
            if (this.pageIndex === 1) {
              this.list = event;
            } else {
              this.list = this.list.concat(event);
            }
            if (cursor > 0) {
              this.page = cursor;
            }
          } else {
            this.list = [];
            this.data = true;
          }
        })
        .catch(error => {
        })
        .finally(() => {
          this.loading = false;
        });
    },
    showPopup() {
      this.show = true;
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  padding-bottom: 55px;
  /deep/ .van-icon-flower-o {
    color: #0072ffe0;
    font-size: 20px;
    vertical-align: middle;
  }
  .awardDeduction_top {
    height: 45px;
    line-height: 45px;
    background: #fff;
    color: #0072ffe0;

  }
  .awardDeduction_content {
    font-size: 15px;
    background: #fff;
    // margin-left: 25px;
    padding: 10px 10px 10px 25px;
    border-bottom: 1px solid #c0c0c059;
    position: relative;
    .my_title_text {
      font-weight: 700;
      font-size: 16px;
      overflow-wrap: break-word;
      display: inline-block;
      width: 72vw;
      text-align: left;
    }
    ul {
      margin-top: 5px;
      li {
        text-align: left;
      }
      li:last-child {
        font-size: 12px;
        color: silver;
        padding-top: 15px;
        margin-left: -8px;
      }
    }
  }
  .color {
    // padding-top: 15px;
    color: dodgerblue;
  }
  .color1 {
    // padding-top: 15px;
    color: silver;
  }
  .left {
    float: left;
  }
  .right {
    position: absolute;
    bottom: 0px;
    right: 20px;
    // float: right;
  }
}
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
</style>
